<!--个人合同-->
<template>
	<a-modal v-bind="option" class="renter-sign-dialog">
		<renter-sign v-model:visible="visibles" :contract="contract" :isChooseProcedureFee="isChooseProcedureFee" @close="close" @success="success" />
		<template #footer />
	</a-modal>
</template>

<script lang="ts" setup>
	import {useStore} from '@/store'
	import {computed, createVNode, reactive, ref, toRaw, toRef, watch, onMounted} from 'vue'
	import {RenterContract} from '@/interface/contract'
	import renterSign from '@/components/contract/signing/renter-sign.vue'
	import billApi from '@/api/bill-api'
	import {message} from 'ant-design-vue'

	const store = useStore()

	const props = withDefaults(
		defineProps<{
			visible: boolean
			isChooseProcedureFee?: boolean
			contract?: RenterContract
		}>(),
		{
			contract: {
				// @ts-ignore成交方式【1-新签,2-续签,3-转租,4-换房】，默认新签
				signType: 1
			}
		}
	)

	const visibles = ref(true)

	const emits = defineEmits(['update:visible', 'close', 'success', 'update:isChooseProcedureFee'])
	const option = reactive({
		width: 1100,
		title: '租客签约',
		centered: true,
		keyboard: false,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			console.log(11)
			visibles.value = true
			canceled.value = true
			emits('update:visible', false)
			emits('update:isChooseProcedureFee', false)
			close()
		}
	})

	// 传递事件到外层
	const close = () => {
		setTimeout(() => emits('close'), 100)
	}
	const success = () => {
		emits('success')
	}

	// 子窗口关闭父窗口
	watch(
		() => visibles.value,
		(newVal: boolean) => {
			if (!newVal) {
				option.onCancel()
			}
		}
	)

	const canceled = ref(true)
	onMounted(() => {
		if (canceled.value && props.contract?.signType === 2) {
			emits('update:visible', false)
			billApi.unclearedDeposit(props.contract?.contractId as string).then(({data = []}) => {
				if (data.length > 0) {
					message.error('原合同押金未结清，不能进行续租操作')
				} else {
					emits('update:visible', true)
					canceled.value = false
				}
			})

			return
		}
	})
</script>

<style lang="less">
	.renter-sign-dialog {
		.ant-modal-body {
			padding: 0 16px;
			overflow: auto;
			min-height: 600px;
			max-height: 1000px;
			height: calc(100vh - 200px);

			.ant-form-item {
				margin-bottom: 16px;

				label[for='form_item_beginTime'] {
					display: flex;

					.display-flex {
						flex: 1;
						justify-content: space-around;
					}
				}
			}

			.custom-radio-group {
				.ant-space {
					display: flex;

					.ant-space-item {
						flex: 1;
					}
				}

				.ant-radio-button-wrapper {
					height: 96px;
					display: block;

					.ant-typography {
						margin-bottom: 6px;
					}
				}
			}

			.template-select-wrapper {
				.ant-form-item-control {
					flex-direction: row;
					align-items: center;
					gap: 16px;

					.ant-select-selection-search {
						left: 0;
					}

					.ant-form-item-extra {
						color: @warning-color;
						font-size: @font-size-sm;
					}
				}

				.ant-select {
					width: 160px;

					.ant-select-selector {
						padding: 0;
						font-size: @font-size-sm;
					}
				}
			}

			.month-quick-radio-group {
				.ant-radio-button-wrapper {
					padding: 0 9px;
				}
			}

			.ant-input-number-group-addon {
				background: #fff;
				color: @text-color;
			}

			.edit-table-row {
				.ant-input,
				.ant-select-selector {
					padding: 0;
					border: none;
				}

				.ant-select,
				.ant-input-number {
					width: 100%;
				}

				.ant-radio-wrapper:last-child {
					margin-right: 0;
				}
			}

			.fee-subject-change {
				.vxe-cell {
					padding: 0;
					.ant-select-disabled {
						background-color: #f5f5f5;
					}
				}
			}
		}
	}
</style>
